<template>
  <a-modal
    v-model:visible="editModal.visible"
    :body-style="{ overflowY: 'auto' }"
    width="1200px"
    :mask-closable="false"
    :keyboard="false"
    :title="editModal.title"
    @cancel="closeModal"
    @ok="onSave"
  >
    <div class="file_list_table" :style="{ height: maxHeight + 'px' }">
      <FileListTable
        v-if="editModal.visible"
        ref="fileListTable"
        :form="form"
        :hide-sign-setting="hideSignSetting"
        @getTableData="getTableData"
      />
    </div>
    <template #footer>
      <a-button key="back" @click="closeModal">取消</a-button>
      <a-button key="submit" type="primary" :loading="loading" @click="onSave">保存</a-button>
    </template>
  </a-modal>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import FileListTable from './FileListTable.vue'

const emits = defineEmits(['onClose'])

const { mutilAddFn, hideSignSetting, tag } = defineProps<{
  mutilAddFn: any
  hideSignSetting?: boolean
  tag?: string | number
}>()

const maxHeight = window.innerHeight - 250
const editModal = reactive({
  visible: false,
  title: ''
})
const form = ref({
  fileListItemList: [
    {
      templateFileList: [],
      newRequireFile: false,
      fileName: '',
      newRequireVersion: false,
      fileFormat: [],
      fileDesc: '',
      fileAmount: 0
    }
  ]
})
const fileListTable = ref()
const loading = ref(false)
const taskId = ref('')

const closeModal = () => {
  form.value = {
    fileListItemList: [
      {
        templateFileList: [],
        newRequireFile: false,
        fileName: '',
        newRequireVersion: false,
        fileFormat: [],
        fileDesc: '',
        fileAmount: 0
      }
    ]
  }
  emits('onClose')
  editModal.visible = false
}

const onSave = () => {
  // loading.value = true
  fileListTable.value.onFinsh()
}

//获取模板表格数据
const getTableData = () => {
  if (form.value.fileListItemList && form.value.fileListItemList.length) {
    form.value.fileListItemList.forEach((item: any) => {
      item.taskId = taskId.value
      item.tag = tag
    })
  }
  mutilAddFn(form.value.fileListItemList)
    .then(() => {
      closeModal()
    })
    .finally(() => {
      loading.value = false
    })
}

const show = (id) => {
  taskId.value = id
  editModal.visible = true
}
defineExpose({
  show
})
</script>

<style lang="less" scoped>
.file_list_table {
  //   height: 400px;
  overflow-y: auto;
  // padding: 20px;
  background: #f9f9f9;
  width: 100% !important;
}
</style>
